<template>
  <div class="loginPage">
    <div class="card" :class="{ 's-gignup': active === 1 }">
      <div class="form sign-in">
        <h2>后台管理系统</h2>
        <NForm ref="formRef" :model="queryForm" show-feedback :rules="rules">
          <NFormItem path="username">
            <label>
              <span>账号</span>
              <input type="text" v-model="queryForm.username" />
            </label>
          </NFormItem>
          <NFormItem path="username">
            <label>
              <span>密码</span>
              <input type="password" v-model="queryForm.password" />
            </label>
          </NFormItem>
        </NForm>
        <NButton type="primary" class="submit" @click="handLogin">
          <NSpin stroke="#fff" v-if="loginLoading">
            <template #icon>
              <i
                class="esayIcon esayIcon-a-jiazaizhongdaxiao"
                style="color: #fff"
              />
            </template>
          </NSpin>
          <span>登录</span>
        </NButton>
        <p class="forrgot-pass">忘记密码</p>
      </div>
      <div class="sub-cont">
        <div class="img">
          <div class="img-text m-up">
            <h2>New here?</h2>
            <p>Sign uo and discover great amount of new opportunities!</p>
          </div>
          <div class="img-text m-in">
            <h2>One of us?</h2>
            <p>
              If you already has ad account, just sign in. We've missed you!
            </p>
          </div>
          <div class="img-btn" @click="activeChange">
            <span class="m-up">注册</span>
            <span class="m-in">登录</span>
          </div>
        </div>
        <div class="form sign-up">
          <h2>后台管理系统</h2>
          <label>
            <span>Eamil Address</span>
            <input type="email" name="email" />
          </label>
          <label>
            <span>Password</span>
            <input type="password" name="password" />
          </label>
          <n-button class="submit" type="primary">注册</n-button>
          <p class="forrgot-pass">Forgot Password ?</p>
        </div>
      </div>
    </div>
    <div class="phone-card">
      <div class="title">后台管理系统</div>
      <div class="form">
        <NTabs
          default-value="signin"
          size="large"
          animated
          justify-content="space-evenly"
        >
          <NTabPane name="signin" tab="登录">
            <NForm :model="queryForm">
              <NFormItemRow label="用户名">
                <NInput
                  v-model:value="queryForm.username"
                  placeholder="请输入账号"
                ></NInput>
              </NFormItemRow>
              <NFormItemRow label="密码">
                <NInput
                  type="password"
                  v-model:value="queryForm.password"
                  show-password-on="click"
                  placeholder="请输入密码"
                ></NInput>
              </NFormItemRow>
            </NForm>
            <NButton
              type="primary"
              block
              strong
              :disabled="loginLoading"
              @click="handLogin"
            >
              <NSpin stroke="#fff" v-if="loginLoading">
                <template #icon>
                  <i
                    class="esayIcon esayIcon-a-jiazaizhongdaxiao"
                    style="color: #fff"
                  ></i>
                </template>
              </NSpin>
              <span>登录</span>
            </NButton>
          </NTabPane>
          <NTabPane name="signup" tab="注册">未开放...</NTabPane>
        </NTabs>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import loginApi from '@/service/api/login'
import {
  NForm,
  NFormItem,
  NFormItemRow,
  NButton,
  NInput,
  NSpin,
  NTabs,
  NTabPane,
  useMessage,
  useLoadingBar
} from 'naive-ui'
import type { FormRules, FormInst } from 'naive-ui'
import type { ILoginParams } from '@/types/api'
import { useRouter } from 'vue-router'
import { authLogin } from '@/router/index'
const active = ref<number>(0)
const activeChange = () => {
  active.value = active.value === 0 ? 1 : 0
}
const queryForm = ref<ILoginParams>({
  username: 'admin',
  password: '123456'
})
const rules: FormRules = {
  username: [
    {
      required: true,
      message: '请输入账号'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码'
    }
  ]
}

const loginLoading = ref(false)
const formRef = ref<FormInst | null>(null)
const message = useMessage()
const handLogin = () => {
  formRef.value?.validate(errors => {
    if (errors && errors.length > 0) {
      const info: any = errors[0][0]
      message.error(info.message)
    } else {
      login()
    }
  })
}
const loadingBar = useLoadingBar()
const router: any = useRouter()
const login = async () => {
  try {
    if (loginLoading.value) return
    loginLoading.value = true
    loadingBar.start()
    const { code, data } = await loginApi.login(queryForm.value)
    if (code !== 200) {
      loginLoading.value = false
      loadingBar.error()
      return
    }
    const firthPath = await authLogin(data.token, false)
    loadingBar.finish()
    router.replace(firthPath)
  } catch (e) {
    loginLoading.value = false
    loadingBar.error()
  }
}
</script>

<style scoped lang="scss">
$imgWidth: 260px;
.loginPage {
  width: 100%;
  height: 100%;
  position: relative;
  background: url('@/assets/login/bg.png') no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #f0f2f5;

  .card {
    overflow: hidden;
    width: 900px;
    height: 660px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border-radius: 15px;
    display: flex;
    box-sizing: border-box;
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
    .form {
      position: relative;
      width: 640px;
      height: 100%;
      -webkit-transition: -webkit-transform 1.2s ease-in-out;
      transition: -webkit-transform 1.2s ease-in-out;
      transition: transform 1.2s ease-in-out;
      transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
      h2 {
        width: 100%;
        font-size: 30px;
        text-align: center;
      }
      label {
        display: block;
        width: 260px;
        margin: 25px auto 0;
        text-align: center;
        span {
          font-size: 14px;
          font-weight: 600;
          color: #505f75;
          text-transform: uppercase;
        }
        input {
          border: none;
          display: block;
          width: 100%;
          margin-top: 5px;
          font-size: 16px;
          padding-bottom: 5px;
          border-bottom: 1px solid rgba(109, 93, 93, 0.4);
          text-align: center;
          font-family: 'Ubuntu', sans-serif;
        }
      }
      button {
        border: none;
        display: block;
        margin: 0 auto;
        width: 260px;
        height: 36px;
        border-radius: 30px;
        color: #fff;
        font-size: 19px;
        cursor: pointer;
      }
      .submit {
        margin-top: 40px;
        margin-bottom: 30px;
        height: 50px;
        text-transform: uppercase;
        font-weight: 600;
        font-family: 'Ubuntu', sans-serif;
        //background: -webkit-linear-gradient(left, #409eff, #f281a8);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .forrgot-pass {
        margin-top: 15px;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        color: #0c0101;
        cursor: pointer;
        &:hover {
          color: red;
        }
      }
    }
    .sub-cont {
      overflow-y: hidden;
      position: absolute;
      left: 640px;
      top: 0;
      width: 900px;
      height: 100%;
      padding-left: 260px;
      background: #fff;
      -webkit-transition: -webkit-transform 1.2s ease-in-out;
      transition: -webkit-transform 1.2s ease-in-out;
      transition: transform 1.2s ease-in-out;
      transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
      box-sizing: border-box;

      .img {
        overflow: hidden;
        position: absolute;
        z-index: 3;
        left: 0;
        top: 0;
        width: $imgWidth;
        height: 100%;
        box-sizing: border-box;
        &:before {
          content: '';
          position: absolute;
          right: 0;
          top: 0;
          width: 900px;
          height: 100%;
          background-image: url('@/assets/login/bg2.jpg');
          background-size: cover;
          -webkit-transition: -webkit-transform 1.2s ease-in-out;
          transition: -webkit-transform 1.2s ease-in-out;
          transition: transform 1.2s ease-in-out;
          transition: transform 1.2s ease-in-out,
            -webkit-transform 1.2s ease-in-out;
        }
        &:after {
          content: '';
          position: absolute;
          right: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.3);
        }
        &-text {
          position: absolute;
          z-index: 2;
          width: 100%;
          padding: 80px 20px;
          text-align: center;
          -webkit-transition: -webkit-transform 1.2s ease-in-out;
          transition: -webkit-transform 1.2s ease-in-out;
          transition: transform 1.2s ease-in-out;
          transition: transform 1.2s ease-in-out,
            -webkit-transform 1.2s ease-in-out;
          color: #fff;

          h2 {
            margin-bottom: 10px;
            font-weight: normal;
          }
          p {
            font-size: 14px;
            line-height: 1.5;
          }
        }

        .m-up {
        }
        .m-in {
          -webkit-transform: translateX(-520px);
          transform: translateX(-520px);
        }
      }
    }
  }
  .img-btn {
    overflow: hidden;
    z-index: 2;
    position: relative;
    width: 100px;
    height: 36px;
    margin: 420px auto 0 auto;
    background: transparent;
    color: #fff;
    text-transform: unset;
    font-size: 15px;
    box-sizing: border-box;
    cursor: pointer;
    line-height: 36px;
    &:after {
      content: '';
      z-index: 2;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border: 2px solid #fff;
      border-radius: 30px;
      box-sizing: border-box;
    }
    span {
      position: absolute;
      left: 0;
      top: 0;
      display: -webkit-box;
      display: flex;
      -webkit-box-pack: center;
      justify-content: center;
      align-content: center;
      width: 100%;
      height: 100%;
      -webkit-transition: -webkit-transform 1.2s ease-in-out;
      transition: -webkit-transform 1.2s ease-in-out;
      transition: transform 1.2s ease-in-out;
      transition: transform 1.2s ease-in-out, -webkit-transform 1.2s ease-in-out;
    }
    .m-in {
      -webkit-transform: translateY(-72px);
      transform: translateY(-72px);
    }
    .m-up {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }

  .sign-in {
    padding-top: 65px;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
  }

  .sign-up {
    padding: 50px 30px;
    box-sizing: border-box;
    -webkit-transform: translate3d(-900px, 0, 0);
    transform: translate3d(-900px, 0, 0);
  }

  .s-gignup {
    .sign-in {
      -webkit-transition-timing-function: ease-out;
      transition-timing-function: ease-out;
      -webkit-transition-duration: 1.2s;
      transition-duration: 1.2s;
      -webkit-transform: translate3d(640px, 0, 0);
      transform: translate3d(640px, 0, 0);
    }
    .sign-up {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    .sub-cont {
      -webkit-transform: translate3d(-640px, 0, 0);
      transform: translate3d(-640px, 0, 0);
      .img {
        &:before {
          -webkit-transform: translate3d(640px, 0, 0);
          transform: translate3d(640px, 0, 0);
        }
        .m-up {
          -webkit-transform: translateX(520px);
          transform: translateX(520px);
        }
        .m-in {
          -webkit-transform: translateX(0);
          transform: translateX(0);
        }
      }
    }
  }

  .phone-card {
    display: none;
    .title {
      text-align: center;
      padding-top: 80px;
      font-size: 25px;
      font-weight: bold;
    }

    .form {
      width: calc(100% - 40px);
      margin: 40px auto 0 auto;
      background: #fff;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 10px;
      .for-pass-tip {
        text-align: right;
        padding-top: 10px;
        color: gray;
      }
      .btns {
        display: flex;
        justify-content: center;
        margin-top: 50px;
        padding-bottom: 20px;
        .btn {
          width: 200px;
          height: 45px;
        }
      }
    }
  }
}

.setting-xu {
  position: fixed;
  z-index: 10;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

@media screen and (max-width: 900px) {
  .loginPage {
    .card {
      display: none;
    }
    .phone-card {
      display: inline;
    }
  }
}
</style>
